<style>
    .footer-home{display: none;}
    /*增减*/
    .number{text-align: center;margin: 0.2rem 0;}
    .number a{border: 1px solid #129aee;float: left;width: 0.8rem;height: 0.8rem;line-height: 0.8rem; font-size: 0.8rem;color: #129aee;}
    .number a.plus{color: #fff;background-color: #129aee;}
    .number input{width: 1.5rem;height: 0.86rem;float: left;border: none; border-top: 1px solid #129aee;border-bottom: 1px solid #129aee;font-size: 0.6rem;text-align: center;color: #129aee;outline: none;}
</style>
<link rel="stylesheet" href="resource/css/new_payway.css?v=0.13" />
<header>
    <a href="javascript:history.back();">
        <i class="iconfont icon-xialalan-copy"></i>

    </a>
    <span>确认订单</span>
</header>
<div class="order-submit margin_bot">
    <div class="order-container ">
        <div class="order-item">
            <div class="item-body flex_display">
                <div class="item-img flex-0">
                    <img src="<?php echo $output['itinerary_info']['ir_thumb']; ?>"/>
                </div>
                <div class="item-info flex-1">
                    <h1 class="p-1"><?php echo $output['itinerary_info']['ir_title']; ?></h1>
                    <!--<span>7050四条装</span>-->
                    <div class="item-price flex_display flex-justify">
                        <p class="color_red">￥<?php echo $output['itinerary_info']['price']; ?></p>
                        <!--<span>×2</span>-->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <ul class="ul_2">
        <form id="food_form">
        <li class="li_2">
            <span>选择数量</span>
            <div class="number fr">
                <a class="minus" style="cursor: pointer;">-</a>
                <input class="p_num" type="text" name="num" value="1" />
                <a class="plus" style="cursor: pointer;">+</a>
        </li>
            <input name="ir_id" value="<?php echo $output['itinerary_info']['id']; ?>" type="hidden">
            <input type="hidden" name="form_submit" value="ok">
        <li class="li_2"><span>联系人</span><input class="info_put" type="text" name="name" placeholder="请输入姓名" /><a class="add fr" id="icon-jia" href="javascript:;">+</a></li>
        <li class="li_2"><span>手机号</span><input class="info_put" type="text" name="phone" placeholder="请输入手机号" /></li>
         <li class="li_2"><span>出行时间</span><input class="info_put" type="date" name="startdate" placeholder="请选择您的出行时间" /></li>
        </form>
    </ul>

    <div class="fix X">
        <div class="confirm-footer">
            <p>合计：<span class="color_red price">￥<?php echo $output['itinerary_info']['price']; ?></span></p>
            <a id="pay_btn">订单提交</a>
        </div>
    </div>
</div>
<div id="sel" style="display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color:#fff;z-index: 100003"></div>
<div class="mask_1" style="display: none;">
    <div class="payway" onclick=" event.stopPropagation();">
        <p>支付选择：</p>
        <ul>
            <li>
                <a  class="pay_type_button" >
                    <label for="radio1">
                        <i class="zf zfb"></i>
                        支付宝支付
                        <input type="radio" name="zf" id="radio1" value="ali" class="radio-btn"/>
                        <i class="radio"></i>
                    </label>
                </a>
            </li>
            <li>
                <a  class="pay_type_button" >
                    <label for="radio2">
                        <i class="zf wx"></i>
                        微信支付
                        <input type="radio" name="zf" id="radio2" class="radio-btn" value="wx"/>
                        <i class="radio"></i>
                    </label>
                </a>
            </li>
        </ul>
        <input type="hidden" name="order_code" value="">
        <input type="hidden" name="pay_type" value="">
        <a  class="submit-btn">确认提交支付</a>
    </div>


</div>
<script>

    //只能输入数字
    $(document).on('input', '.p_num', function () {
        if (this.value !== '') {
            this.value = this.value.replace(/\D/g, '');
            this.value = this.value === '' ? 0 : parseInt(this.value);
        }
        countPrice();
    });
    //减少张数
    $(document).on('click', '.minus', function () {
        var input = $(this).next();
        var val = input.val();
        if (val === '' || parseInt(val) <= 0) {
            input.val(0)
        } else {
            input.val(parseInt(val) - 1);
        }
        countPrice();
    });
    //增加张数
    $(document).on('click', '.plus', function () {
        var input = $(this).prev();
        var val = input.val();
        if (val === '') {
            input.val(1)
        } else {
            input.val(parseInt(val) + 1);
        }
        countPrice();
    });

    //触发计算价格
    function countPrice() {
        var count = 0;
        $('.p_num').each(function (i) {
            var _this = $(this);
            var val = _this.val();
            count += parseFloat(<?php echo $output['itinerary_info']['price'] ?>) * parseInt(val ? val : 0);
        });
        //console.log(count);
        $('.price').text('¥' + count.toFixed(2));
        $('input[name="totalAmount"]').val(count);
    }
    //简单校验库存
    function checkStore() {
        var res = true;
        var nums = 0;
        $('.p_num').each(function (i) {
            var _this = $(this);
            var val = _this.val();
            val = val ? parseInt(val) : 0;
            nums += val;
            if (val > parseInt(<?php echo $output['itinerary_info']['stock']; ?>)) {
                res = false;
                popAlert( '对不起,该商品库存不足');
                return false;
            }
        });
        if (nums <= 0) {
            popAlert('购买数量不能为0');
            res = false;
        }
        return res;
    }
    //打开选择游客信息
    function openSel() {
        $('#sel').load('index.php?act=hotel&op=sel_info').fadeIn();
    }
    //关闭选择游客信息
    function closeSel() {
        $('#sel').fadeOut();
    }
    //打开编辑游客信息
    function openEdit(id) {
        $('#edit').load('index.php?act=hotel&op=update_info&id=' + id).fadeIn();
    }
    //关闭编辑游客信息
    function closeEdit() {
        $('#edit').fadeOut();
    }
    //选择游客信息
    $('#icon-jia').click(function () {
        // alert(11);
        openSel();
    });
    var orderForm = $("#food_form");
    //是否正在支付
    var paying = false;
    $("#pay_btn").click(function(){
        if ($.trim(orderForm.find('input[name="name"]').val()) == '') {
            popAlert('姓名不能为空');
            //return;
        } else if (!/^1\d{10}$/.test(orderForm.find('input[name="phone"]').val())) {
            popAlert('手机号不正确');
            //return;
        } else if($.trim(orderForm.find('input[name="startdate"]').val()) == ''){
            popAlert('出行时间不能为空');
        }else{
             var data = orderForm.find('input[name="startdate"]').val();
            var now = new Date();
            now.setDate(now.getDate()-1);
            var chknow = new Date(Date.parse(data));
            if (chknow < now) {
                popAlert("日期不能小于今天哦！");
                return;
            }
            if(checkStore()){
                $('.mask_1').show();
            }
        }
    });

    //支付操作
    $('.mask_1').click(function(){
        paying = false;
        $('.mask_1').hide();
    });
    $('.pay_type_button').click(function(){
        var pay_type= $(this).find('input').val();
        $("[name='pay_type']").val(pay_type);
    });
    $('.submit-btn').click(function(){
        if($("[name='pay_type']").val()==''){
            alert('请选择您的支付方式！');
            return;
        }
        if (paying) {
            $('.mask_1').hide();
            popAlert('您已提交过订单,请勿重复提交');
            return false;
        }
        if($("[name='pay_type']").val() == 'ali'){
            //支付宝支付
            alipay();
        }
        if($("[name='pay_type']").val() == 'wx'){
            //微信支付..
            wxpay();
        }
    });
    //支付宝支付
    function alipay(){
        $.ajax({
            url: 'index.php?act=order&op=itinerary_place&t=ali',
            type: 'POST',
            data: orderForm.serialize(),
            dataType: 'json',
            async: false,
            success: function (data, textStatus, jqXHR) {
                if (data.errcode == 0) {
                    if (data.errmsg == false) {
                        $('.mask_1').hide();
                        popAlert('支付错误', function () {
                            location.href = 'index.php?act=member&op=order';
                        });
                    } else {
                        paying =true;
                        window.app && window.app.AppPay(data.errmsg);
                        window.webkit && window.webkit.messageHandlers.AppPay.postMessage(data.errmsg);
                    }
                } else {
                    $('.mask_1').hide();
                    popAlert(data.errmsg, function () {
                        paying = false;
                    });
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                paying = false;
            }
        });
    }

    function wxpay(){
        $.ajax({
            url: 'index.php?act=order&op=itinerary_place&t=wx',
            type: 'POST',
            data: orderForm.serialize(),
            dataType: 'json',
            async: false,
            success: function (data, textStatus, jqXHR) {
                if (data.errcode == 0) {
                    if (data.errmsg == false) {
                        $('.mask_1').hide();
                        popAlert('支付错误', function () {
                            location.href = 'index.php?act=member&op=order';
                        });
                    } else {
                        paying =true;
                        window.app && window.app.AppWxPay(JSON.stringify(data.errmsg));
                        window.webkit && window.webkit.messageHandlers.AppWxPay.postMessage(JSON.stringify(data.errmsg));
                    }
                } else {
                    $('.mask_1').hide();
                    popAlert(data.errmsg, function () {
                        paying = false;
                    });
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                paying = false;
            }
        });
    }
</script>